<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Clamp primitives to the terrain.">
    <meta name="cesium-sandcastle-labels" content="Tutorials, Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js" nomodule></script>
    <script type="module" src="../load-cesium-es6.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <div id="terrainMenu"></div>
    <div id="zoomButtons"></div>
    <div id="toggleLighting"></div>
    <div id="sampleButtons"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});
viewer.scene.globe.depthTestAgainstTerrain = true;

Sandcastle.addDefaultToolbarMenu([{
    //
    // To clamp points or billboards set the heightReference to CLAMP_TO_GROUND or RELATIVE_TO_GROUND
    //
    text : 'Draw Point with Label',
    onselect : function() {
        var e = viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
            point : {
                color : Cesium.Color.SKYBLUE,
                pixelSize : 10,
                outlineColor : Cesium.Color.YELLOW,
                outlineWidth : 3,
                heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
            },
            label : {
                text : 'Clamped to ground',
                font : '14pt sans-serif',
                heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
                horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
                verticalOrigin : Cesium.VerticalOrigin.BASELINE,
                fillColor : Cesium.Color.BLACK,
                showBackground : true,
                backgroundColor : new Cesium.Color(1, 1, 1, 0.7),
                backgroundPadding : new Cesium.Cartesian2(8, 4),
                disableDepthTestDistance : Number.POSITIVE_INFINITY // draws the label in front of terrain
            }
        });

        viewer.trackedEntity = e;
    }
}, {
    text : 'Draw Billboard',
    onselect : function() {
        var e = viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
            billboard : {
                image : '../images/facility.gif',
                heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
            }
        });

        viewer.trackedEntity = e;
    }
}, {
    //
    // Corridors, polygons and rectangles will be clamped automatically if they are filled with a constant color and
    // has no height or extruded height.
    // NOTE: Setting height to 0 will disable clamping.
    //
    text : 'Draw Corridor',
    onselect : function() {
        var e = viewer.entities.add({
            corridor : {
                positions : Cesium.Cartesian3.fromDegreesArray([
                    -122.19, 46.1914,
                    -122.21, 46.21,
                    -122.23, 46.21
                ]),
                width : 2000.0,
                material : Cesium.Color.GREEN.withAlpha(0.5)
            }
        });

        viewer.zoomTo(e);
    }
}, {
    text : 'Draw Polygon',
    onselect : function() {
        var e = viewer.entities.add({
            polygon : {
                hierarchy : {
                    positions : [new Cesium.Cartesian3(-2358138.847340281, -3744072.459541374, 4581158.5714175375),
                                 new Cesium.Cartesian3(-2357231.4925370603, -3745103.7886602185, 4580702.9757762635),
                                 new Cesium.Cartesian3(-2355912.902205431, -3744249.029778454, 4582402.154378103),
                                 new Cesium.Cartesian3(-2357208.0209552636, -3743553.4420488174, 4581961.863286629)]
                },
                material : Cesium.Color.BLUE.withAlpha(0.5)
            }
        });

        viewer.zoomTo(e);
    }
}, {
    text : 'Draw Textured Polygon',
    onselect : function() {
        if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
            window.alert('Terrain Entity materials are not supported on this platform');
            return;
        }

        var e = viewer.entities.add({
            polygon : {
                hierarchy : {
                    positions : [new Cesium.Cartesian3(-2358138.847340281, -3744072.459541374, 4581158.5714175375),
                                 new Cesium.Cartesian3(-2357231.4925370603, -3745103.7886602185, 4580702.9757762635),
                                 new Cesium.Cartesian3(-2355912.902205431, -3744249.029778454, 4582402.154378103),
                                 new Cesium.Cartesian3(-2357208.0209552636, -3743553.4420488174, 4581961.863286629)]
                },
                material : '../images/Cesium_Logo_Color.jpg',
                classificationType : Cesium.ClassificationType.TERRAIN,
                stRotation : Cesium.Math.toRadians(45)
            }
        });

        viewer.zoomTo(e);
    }
}, {
    text : 'Draw Rectangle',
    onselect : function() {
        var e = viewer.entities.add({
            rectangle : {
                coordinates : Cesium.Rectangle.fromDegrees(-122.3, 46.0, -122.0, 46.3),
                material : Cesium.Color.RED.withAlpha(0.5)
            }
        });

        viewer.zoomTo(e);
    }
}, {
    text : 'Draw Model',
    onselect : function() {
        var e = viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
            model : {
                uri : '../../SampleData/models/CesiumMan/Cesium_Man.glb',
                heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
                minimumPixelSize : 128,
                maximumScale : 100
            }
        });

        viewer.trackedEntity = e;
    }
}, {
    text : 'Sample line positions and draw with depth test disabled',
    onselect : function() {
        var length = 1000;

        var startLon = Cesium.Math.toRadians(86.953793);
        var endLon = Cesium.Math.toRadians(86.896497);

        var lat = Cesium.Math.toRadians(27.988257);

        var terrainSamplePositions = [];
        for (var i = 0; i < length; ++i) {
            var lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
            var position = new Cesium.Cartographic(lon, lat);
            terrainSamplePositions.push(position);
        }

        Cesium.when(Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, terrainSamplePositions), function(samples) {
            var offset = 10.0;
            for (var i = 0; i < samples.length; ++i) {
                samples[i].height += offset;
            }

            viewer.entities.add({
                polyline : {
                    positions : Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples),
                    arcType : Cesium.ArcType.NONE,
                    width : 5,
                    material : new Cesium.PolylineOutlineMaterialProperty({
                        color : Cesium.Color.ORANGE,
                        outlineWidth : 2,
                        outlineColor : Cesium.Color.BLACK
                    }),
                    depthFailMaterial : new Cesium.PolylineOutlineMaterialProperty({
                        color : Cesium.Color.RED,
                        outlineWidth : 2,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });

            var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
            offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
            viewer.camera.lookAt(target, offset);
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        });
    }
}, {
    text : 'Draw polyline on terrain',
    onselect : function() {

        if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
            window.alert('Polylines on terrain are not supported on this platform');
        }

        viewer.entities.add({
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArray([
                    86.953793, 27.928257,
                    86.953793, 27.988257,
                    86.896497, 27.988257
                ]),
                clampToGround : true,
                width : 5,
                material : new Cesium.PolylineOutlineMaterialProperty({
                    color : Cesium.Color.ORANGE,
                    outlineWidth : 2,
                    outlineColor : Cesium.Color.BLACK
                })
            }
        });

        var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
        var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}], 'zoomButtons');

Sandcastle.reset = function () {
    viewer.entities.removeAll();
};

//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    startup(Cesium);
}
</script>
</body>
</html>
